<template>
    <div id="dragg"  :style="{ top: posY + 'px', left: posX + 'px',zIndex:3 }">
      <div id="backgroundred" 
     >
    
      </div>
      <slot></slot>
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue';
  let backgroundred=ref(null)
  document.documentElement.style.zIndex=-1
  onMounted(()=>{
      backgroundred.value = document.getElementById("backgroundred");
       
    backgroundred.value.addEventListener("mousedown",function(e){
      offx.value=e.clientX-posX.value
      offy.value=e.clientY-posY.value
     
      document.onmousemove=function(e){
        
          
          posX.value= e.clientX-offx.value
       posY.value= e.clientY-offy.value
       if(posX.value<0){
          posX.value=0
       }
       if(posY.value<0){
          posY.value=0
       }
       if(posX.value>document.documentElement.clientWidth-backgroundred.value.offsetWidth){
          posX.value=document.documentElement.clientWidth-backgroundred.value.offsetWidth
       }
       if(posY.value>document.documentElement.clientHeight-backgroundred.value.offsetHeight){
          posY.value=document.documentElement.clientHeight-backgroundred.value.offsetHeight}
  
  
      }
      document.onmouseup=function(){
          document.onmousemove=null
          document.onmouseup=null
      }
    });
  })
  let posX = ref(414);
  let posY = ref(291);
  let offx=ref(0)
  let offy=ref(0)
  </script>
  <style scoped>
  .faster{
      width: 100vw;
      height: 100vh;
      background-color: rgb(84, 26, 26);
  
  }
  
  #dragg{
    position: absolute;
    font-size:14px;
  }
  
  #backgroundred{
     /*
         width: 200px;
     */
  
      height: 34px;
     
      transition: transform 0.3s;
      cursor: move;
      background: rgb(19, 19, 225);
    
    }
    .backgroundred:hover {
      transform: scale(1.3);
    }
  </style>
  